<template>
  <div class="dashboard">
    <!-- 顶部统计卡片 -->
    <div class="stats-row">
      <el-card class="stat-card" v-for="stat in stats" :key="stat.title">
        <div class="stat-content">
          <div class="stat-icon" :style="{ backgroundColor: stat.color }">
            <el-icon><component :is="stat.icon" /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-title">{{ stat.title }}</div>
            <div class="stat-change" :class="stat.trend">
              <el-icon>
                <component :is="stat.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
              </el-icon>
              {{ stat.change }}%
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-row">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <el-icon><TrendCharts /></el-icon>
            <span>作物产量趋势</span>
          </div>
        </template>
        <div class="chart-container">
          <v-chart :option="yieldChartOption" style="height: 300px" />
        </div>
      </el-card>

      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <el-icon><PieChart /></el-icon>
            <span>作物分布</span>
          </div>
        </template>
        <div class="chart-container">
          <v-chart :option="cropDistributionOption" style="height: 300px" />
        </div>
      </el-card>
    </div>

    <!-- 实时监控和任务列表 -->
    <div class="bottom-row">
      <el-card class="monitor-card">
        <template #header>
          <div class="card-header">
            <el-icon><Monitor /></el-icon>
            <span>实时监控</span>
          </div>
        </template>
        <div class="monitor-list">
          <div 
            v-for="item in monitorData" 
            :key="item.id" 
            class="monitor-item"
            :class="item.status"
          >
            <div class="monitor-icon">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="monitor-info">
              <div class="monitor-name">{{ item.name }}</div>
              <div class="monitor-value">{{ item.value }}</div>
            </div>
            <div class="monitor-status">
              <el-tag :type="item.status === 'normal' ? 'success' : 'danger'" size="small">
                {{ item.status === 'normal' ? '正常' : '异常' }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-card>

      <el-card class="task-card">
        <template #header>
          <div class="card-header">
            <el-icon><List /></el-icon>
            <span>今日任务</span>
          </div>
        </template>
        <div class="task-list">
          <div 
            v-for="task in tasks" 
            :key="task.id" 
            class="task-item"
            :class="task.priority"
          >
            <div class="task-checkbox">
              <el-checkbox v-model="task.completed" />
            </div>
            <div class="task-content">
              <div class="task-title">{{ task.title }}</div>
              <div class="task-desc">{{ task.description }}</div>
            </div>
            <div class="task-time">{{ task.time }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: 'Dashboard',
  components: {
    VChart
  },
  data() {
    return {
      stats: [
        {
          title: '总产量',
          value: '2,847吨',
          change: 12.5,
          trend: 'up',
          icon: 'TrendCharts',
          color: '#409EFF'
        },
        {
          title: '种植面积',
          value: '50亩',
          change: 5.2,
          trend: 'up',
          icon: 'Location',
          color: '#67C23A'
        },
        {
          title: '设备状态',
          value: '98%',
          change: 2.1,
          trend: 'up',
          icon: 'Setting',
          color: '#E6A23C'
        },
        {
          title: '环境指数',
          value: '92',
          change: 1.8,
          trend: 'down',
          icon: 'Sunny',
          color: '#F56C6C'
        }
      ],
      monitorData: [
        {
          id: 1,
          name: '温度传感器',
          value: '25.6°C',
          status: 'normal',
          icon: 'Thermometer'
        },
        {
          id: 2,
          name: '湿度传感器',
          value: '68%',
          status: 'normal',
          icon: 'WaterDrop'
        },
        {
          id: 3,
          name: '土壤湿度',
          value: '45%',
          status: 'warning',
          icon: 'Soil'
        },
        {
          id: 4,
          name: '光照强度',
          value: '850 lux',
          status: 'normal',
          icon: 'Sunny'
        },
        {
          id: 5,
          name: 'CO2浓度',
          value: '420 ppm',
          status: 'normal',
          icon: 'Wind'
        }
      ],
      tasks: [
        {
          id: 1,
          title: '检查灌溉系统',
          description: '确保所有喷头正常工作',
          time: '09:00',
          completed: false,
          priority: 'high'
        },
        {
          id: 2,
          title: '施肥作业',
          description: '为玉米区域施加氮肥',
          time: '10:30',
          completed: false,
          priority: 'medium'
        },
        {
          id: 3,
          title: '病虫害检查',
          description: '检查水稻区域病虫害情况',
          time: '14:00',
          completed: true,
          priority: 'high'
        },
        {
          id: 4,
          title: '数据备份',
          description: '备份今日监控数据',
          time: '16:00',
          completed: false,
          priority: 'low'
        }
      ]
    }
  },
  computed: {
    yieldChartOption() {
      return {
        title: {
          text: '月度产量统计',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['水稻', '玉米', '蔬菜'],
          bottom: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value',
          name: '产量(吨)'
        },
        series: [
          {
            name: '水稻',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230],
            smooth: true,
            lineStyle: { color: '#67C23A' },
            itemStyle: { color: '#67C23A' }
          },
          {
            name: '玉米',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330],
            smooth: true,
            lineStyle: { color: '#E6A23C' },
            itemStyle: { color: '#E6A23C' }
          },
          {
            name: '蔬菜',
            type: 'line',
            data: [150, 232, 201, 154, 190, 330],
            smooth: true,
            lineStyle: { color: '#409EFF' },
            itemStyle: { color: '#409EFF' }
          }
        ]
      }
    },
    cropDistributionOption() {
      return {
        title: {
          text: '种植面积分布',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}亩 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          bottom: 0
        },
        series: [
          {
            name: '种植面积',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 15, name: '水稻', itemStyle: { color: '#67C23A' } },
              { value: 12, name: '玉米', itemStyle: { color: '#E6A23C' } },
              { value: 8, name: '蔬菜', itemStyle: { color: '#409EFF' } },
              { value: 6, name: '小麦', itemStyle: { color: '#F56C6C' } },
              { value: 9, name: '其他', itemStyle: { color: '#909399' } }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
  font-size: 24px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.stat-change.up {
  color: #67C23A;
}

.stat-change.down {
  color: #F56C6C;
}

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-card {
  height: 400px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.chart-container {
  height: 100%;
}

.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.monitor-card,
.task-card {
  height: 400px;
}

.monitor-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.monitor-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s;
}

.monitor-item:hover {
  background: #e9ecef;
}

.monitor-item.warning {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}

.monitor-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.monitor-info {
  flex: 1;
}

.monitor-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.monitor-value {
  font-size: 16px;
  font-weight: bold;
  color: #606266;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s;
}

.task-item:hover {
  background: #e9ecef;
}

.task-item.high {
  border-left: 4px solid #F56C6C;
}

.task-item.medium {
  border-left: 4px solid #E6A23C;
}

.task-item.low {
  border-left: 4px solid #67C23A;
}

.task-checkbox {
  margin-right: 12px;
}

.task-content {
  flex: 1;
}

.task-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.task-desc {
  font-size: 12px;
  color: #909399;
}

.task-time {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
}
</style> 